<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/service/css/index.css?2">
    <title>Document</title>
</head>

<body>
<div class="box">
    <!-- <div class="menu"></div> -->
    <div class="content">
        <!-- <div class="head"></div> -->

        <div class="floor1-box">
            <div class="flex-1">
                <div class="floor1-each each-0 btn btn-addtabs" data-url="{:url('service/order/complaint')}">
                    <div class="text-box">
                        <div class="text-box-text">今日投诉订单</div>
                        <div class="number">{$today_complaint}</div>
                        <div class="change">
                            昨日投诉 {$yesterday_complaint}
<!--                            <img class="up-icon" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />-->
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/service/image/recharge.png" alt="" />
                    </div>

                </div>
                <div class="floor1-each each-1">
                    <div class="text-box">
                        <div class="text-box-text">总用户</div>
                        <div class="number">{$data.total_user_nums}</div>
                        <div class="change">
                            比昨日+{$diff.total_user_nums}
                            <img class="up-icon" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/service/image/user.png" alt="" />
                    </div>
                </div>
                <div class="floor1-each each-2">
                    <div class="text-box">
                        <div class="text-box-text">总会员</div>
                        <div class="number">{$data.total_plus_nums}</div>
                        <div class="change">
                            比昨日+{$diff.total_plus_nums}
                            <img class="up-icon" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/service/image/member.png" alt="" />
                    </div>
                </div>
            </div>

            <div class="flex-2">
                
                <div class="floor1-each each-3">
                    <div class="text-box">
                        <div class="text-box-text">总服务人员</div>
                        <div class="number">{$data.total_skill_nums}</div>
                        <div class="change">
                            比昨日+{$diff.total_skill_nums}
                            <img class="up-icon" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/service/image/serve.png" alt="" />
                    </div>
                </div>
                <div class="floor1-each each-4">
                    <div class="text-box">
                        <div class="text-box-text">总商户</div>
                        <div class="number">{$data.total_shop_nums}</div>
                        <div class="change">
                            比昨日+{$diff.total_shop_nums}
                            <img class="up-icon" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/service/image/serve.png" alt="" />
                    </div>
                </div>
            </div>
        </div>




        <div class="floor1-box">
            <div class="flex-1">
                <div class="box-1">
                    
                    <div class="sum">订单总金额（元）</div>
                    <div class="sum-money">{$data.total_price}</div>
                    <div class="box1-change">
                        比昨日+{$diff.total_price}
                        <img class="box-1-change-img" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                    </div>
                    <div class="back">
                        
                        <div>
                            <div class="back-sum">总订单</div>
                        <div class="back-sum-money">{$data.total_order_nums}</div>
                        <div class="back-change">
                            比昨日+{$diff.total_order_nums}
                            <img class="box-1-change-img" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                        </div>
                        <div style="padding-right: 24px;">
                            <div class="back-sum">总佣金（元）</div>
                        <div class="back-sum-money">{$data.rebate_price}</div>
                        <div class="back-change">
                            比昨日+{$diff.rebate_price}
                            <img class="box-1-change-img" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                        </div>
                    </div>
                </div>

                <div class="box-2-1">
                    <div class="ico-img">
                        <img class="img-ico-img" src="__CDN__/assets/addons/service/image/recharge.png" alt="" />
                    </div>
                    <div class="box-2-back">
                        <div style="height: 1px"></div>
                        <div class="back-sum">总充值（元）</div>
                        <div class="back-sum-money">{$data.recharge_price}</div>
                        <div class="back-change">
                            比昨日+{$diff.recharge_price}
                            <img class="back-change-img" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex-2">
                <div class="box-2-1">
                    <div class="ico-img">
                        <img class="img-ico-img" src="__CDN__/assets/addons/service/image/recharge.png" alt="" />
                    </div>
                    <div class="box-2-back">
                        <div style="height: 1px"></div>
                        <div class="back-sum">总提现（元）</div>
                        <div class="back-sum-money">{$data.withdraw_price}</div>
                        <div class="back-change">
                            比昨日+{$diff.withdraw_price}
                            <img class="back-change-img" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                        </div>
                    </div>
                </div>

                <div class="newbox-3">
                    <div class="newbox-3-1">
                        <div class="newbox-3-1-text">
                            <div style="height: 8px"></div>
                            <div class="back-sum">服务人员保证金（元）</div>
                            <div class="back-sum-money">{$data.skill_ensure_price}</div>
                            <div class="back-change">
                                比昨日+{$diff.skill_ensure_price}
                                <img class="back-change-img" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                            </div>

                        </div>
                        <div class="newbox-3-1-img">
                            <img class="newbox-3-1-img" src="__CDN__/assets/addons/service/image/Intersect2.png" alt="">
                        </div>
                    </div>
                    <!-- <div class="newbox-3-2"></div> -->
                    <div class="newbox-3-2">
                        <div class="newbox-3-1-text">
                            <div style="height: 8px"></div>
                            <div class="back-sum">商户保证金（元）</div>
                            <div class="back-sum-money">{$data.shop_ensure_price}</div>
                            <div class="back-change">
                                比昨日+{$diff.shop_ensure_price}
                                <img class="back-change-img" src="__CDN__/assets/addons/service/image/change-2.png" alt="" />
                            </div>

                        </div>
                        <div class="newbox-3-1-img">
                            <img class="newbox-3-1-img" src="__CDN__/assets/addons/service/image/Intersect2.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="floor1-box">
            <div class="flex-1">
                <div class="box-4">
                    <div class="box-4-1">
                        <div class="nav-tabs-custom charts-custom">
                                <!-- Tabs within a box -->
                                <div class="charts-box">
                                    <div class="line"></div>订单趋势
                                </div>
                                
                                <div class="tab-content no-padding">
                                    <!-- Morris chart - Sales -->
                                    <div class="chart tab-pane active" id="line-chart" style="position: relative; height: 230px;"></div>
                                    
                                </div>
                            </div>
                    </div>
                    <div class="box-4-2">
                        <div class="nav-tabs-custom charts-custom">
                                <!-- Tabs within a box -->
                                
                                <div class="charts-box">
                                    <div class="line"></div>用户趋势
                                </div>
                                <div class="tab-content no-padding">
                                    <!-- Morris chart - Sales -->
                                    <div class="chart tab-pane active" id="line-user-chart" style="position: relative; height: 230px;"></div>
                                    
                                </div>
                            </div>
                    </div>
                </div>

                <div class="newbox-5-1">
                    <div class="box-6-each single-1">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/service/image/single-1.png" alt="" />今日已服务
                        </div>
                        <div class="box-6-each-number">{$finish}</div>

                    </div>
                    <div class="box-6-each single-3">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/service/image/single-4.png" alt="" />今日待服务
                        </div>
                        <div class="box-6-each-number">{$notFinish}</div>

                    </div>
                    <div class="box-6-each single-5">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/service/image/single-6.png" alt="" />后日待服务
                        </div>
                        <div class="box-6-each-number">{$afterNotFinish}</div>

                    </div>
                </div>
            </div>

            <div class="flex-2">
                <div class="newbox-5-1">
                    <div class="box-6-each single-2">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/service/image/single-2.png" alt="" />昨日已服务
                        </div>
                        <div class="box-6-each-number">{$beforeFinish}</div>

                    </div>
                    <div class="box-6-each single-4">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/service/image/single-3.png" alt="" />明日待服务
                        </div>
                        <div class="box-6-each-number">{$tomorrowNotFinish}</div>
                    </div>
                    <div class="box-6-each single-6">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/service/image/single-5.png" alt="" />售后订单
                        </div>
                        <div class="box-6-each-number">{$refund}</div>
                    </div>
                </div>

                <div class="box-5">
                    <div class="box-5-each">
                        <div class="box-5-text">
                            <div class="today">今日订单</div>
                            <div class="number-b">{$dayOrder}</div>

                        </div>
                        <div class="box-5-img">
                            <img class="img-box-5-img" src="__CDN__/assets/addons/service/image/trend-1.png" alt="" />
                        </div>
                    </div>
                    <div class="box-5-each">
                        <div class="box-5-text">
                            <div class="today">今日用户</div>
                            <div class="number-b">{$dayUser}</div>

                        </div>
                        <div class="box-5-img">
                            <img class="img-box-5-img" src="__CDN__/assets/addons/service/image/trend-2.png" alt="" />
                        </div>
                    </div>
                    <div class="box-5-each">
                        <div class="box-5-text">
                            <div class="today">今日充值（元）</div>
                            <div class="number-b">{$dayRecharge}</div>
                        </div>
                        <div class="box-5-img">
                            <img class="img-box-5-img" src="__CDN__/assets/addons/service/image/trend-3.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="floor1-box" id="app">
            
            <div class="flex-1 flex-rank">
                <div class="box-7">
                    <div class="box-3-head">
                        <div class="title">
                            <span class="rod"></span> 服务销量排行
                        </div>
                        <div class="tags-box" id="list1">
                            <span class="tags-box-span" :class="{curtag1 : goodsType == 0}" style="border-radius: 6px 0px 0px 6px" @click="goodsChange(0)">日</span><span
                                class="tags-box-span"  :class="{curtag1 : goodsType == 1}" @click="goodsChange(1)">月</span class="tags-box-span"><span class="tags-box-span"  :class="{curtag1 : goodsType == 2}" @click="goodsChange(2)">年</span><span
                                class="tags-box-span"  :class="{curtag1 : goodsType == 3}" style="border-radius: 0px 6px 6px 0px" @click="goodsChange(3)">总</span>
                        </div>
                    </div>

                    <div class="list-box">
                        
                        <div class="title-box">
                            <div class="title-1">排名</div>
                            <div class="title-2">项目名</div>
                            <div class="title-3">订单量</div>
                            <div class="title-4">价格</div>
                        </div>

                        <div class="overflow-box" v-if="goodsType == 0">
                            {volist name="dayGoods" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.goodsName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="goodsType == 1">
                            {volist name="monthGoods" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.goodsName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="goodsType == 2">
                            {volist name="yearGoods" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.goodsName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="goodsType == 3">
                            {volist name="allGoods" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.goodsName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>

                <div class="box-7">
                    <div class="box-3-head">
                        <div class="title">
                            <span class="rod"></span> 城市订单排行
                        </div>
                        <div class="tags-box" id="list2">
                            <span class="tags-box-span" :class="{curtag1 : cityType == 0}"  @click="cityChange(0)" style="border-radius: 6px 0px 0px 6px">日</span><span
                                class="tags-box-span" :class="{curtag1 : cityType == 1}"  @click="cityChange(1)">月</span class="tags-box-span"><span class="tags-box-span" :class="{curtag1 : cityType == 2}"  @click="cityChange(2)">年</span><span
                                class="tags-box-span" style="border-radius: 0px 6px 6px 0px" :class="{curtag1 : cityType == 3}"  @click="cityChange(3)">总</span>
                        </div>
                    </div>

                    <div class="list-box">
                        
                        <div class="title-box">
                            <div class="title-1">排名</div>
                            <div class="title-2">城市名</div>
                            <div class="title-3">订单量</div>
                            <div class="title-4">金额</div>
                        </div>

                        <div class="overflow-box" v-if="cityType == 0">
                            {volist name="dayCity" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.city}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="cityType == 1">
                            {volist name="monthCity" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.city}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="cityType == 2">
                            {volist name="yearCity" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.city}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="cityType == 3">
                            {volist name="allCity" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.city}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex-2  flex-rank">
                <div class="box-7">
                    <div class="box-3-head">
                        <div class="title">
                            <span class="rod"></span> 商家订单排行
                        </div>
                        <div class="tags-box" id="list3">
                            <span class="tags-box-span" :class="{curtag1 : shopType == 0}"  @click="shopChange(0)" style="border-radius: 6px 0px 0px 6px">日</span><span
                                class="tags-box-span" :class="{curtag1 : shopType == 1}"  @click="shopChange(1)">月</span class="tags-box-span">
                                <span class="tags-box-span" :class="{curtag1 : shopType == 2}"  @click="shopChange(2)">年</span>
                                <span class="tags-box-span" :class="{curtag1 : shopType == 3}"  @click="shopChange(3)" style="border-radius: 0px 6px 6px 0px">总</span>
                        </div>
                    </div>

                    <div class="list-box">
                        
                        <div class="title-box">
                            <div class="title-1">排名</div>
                            <div class="title-2">商家名</div>
                            <div class="title-3">订单量</div>
                            <div class="title-4">金额</div>
                        </div>

                        <div class="overflow-box" v-if="shopType == 0">
                            {volist name="dayShop" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.shopName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="shopType == 1">
                            {volist name="monthShop" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.shopName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="shopType == 2">
                            {volist name="yearShop" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.shopName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="shopType == 3">
                            {volist name="allShop" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.shopName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>

                <div class="box-7">
                    <div class="box-3-head">
                        <div class="title">
                            <span class="rod"></span> 服务者订单排行
                        </div>
                        <div class="tags-box" id="list4">
                            <span class="tags-box-span" :class="{curtag1 : skillType == 0}"  @click="skillChange(0)" style="border-radius: 6px 0px 0px 6px">日</span>
                            <span class="tags-box-span" :class="{curtag1 : skillType == 1}"  @click="skillChange(1)">月</span class="tags-box-span">
                            <span class="tags-box-span" :class="{curtag1 : skillType == 2}"  @click="skillChange(2)">年</span>
                            <span class="tags-box-span" :class="{curtag1 : skillType == 3}"  @click="skillChange(3)" style="border-radius: 0px 6px 6px 0px">总</span>
                        </div>
                    </div>

                    <div class="list-box">
                        
                        <div class="title-box">
                            <div class="title-1">排名</div>
                            <div class="title-2">服务人员</div>
                            <div class="title-3">订单量</div>
                            <div class="title-4">金额</div>
                        </div>

                        <div class="overflow-box" v-if="skillType == 0">
                            {volist name="daySkill" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.skillName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="skillType == 1">
                            {volist name="monthSkill" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.skillName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="skillType == 2">
                            {volist name="yearSkill" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.skillName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                        <div class="overflow-box" v-if="skillType == 3">
                            {volist name="allSkill" id="vb"}
                            <div class="content-box">
                                <div class="title-1">{$key+1}</div>
                                <div class="title-2">{$vb.skillName}</div>
                                <div class="title-3">{$vb.num}</div>
                                <div class="title-4">{$vb.total_price}</div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
</body>

<script src="__CDN__/assets/addons/service/js/vue.min.js"></script>
<script type="text/javascript" charset="utf-8">
    let add = new Vue({
                el: '#app',
                data(){
                    return {
                        goodsType: 0,
                        cityType: 0,
                        shopType: 0,
                        skillType:0
                    }
                },
           
                
                methods:{
                    cityChange(type){
                        this.cityType = type
                    },
                    goodsChange(type){
                        this.goodsType = type
                    },
                    shopChange(type){
                        this.shopType = type
                    },
                    skillChange(type){
                        this.skillType = type
                    },
                }
            })
</script>

</html>